import React, {Component} from "react";
import './index.less';
import logo from '../../assets/images/logo.png';
import {Link, withRouter} from "react-router-dom";
import { Menu, Icon } from 'antd';
import menuList from '../../config/menuConfig';
//import memoryUtils from '../../utils/memoryUtils'
import {connect} from "react-redux";
import {setHeadTitle} from '../../redux/actions'

const { SubMenu } = Menu;

class LeftNav extends Component {
    hasAuth = (item) => {
        const {key, isPublic} = item;
        // const menus = memoryUtils.user.role.menus;
        // const username = memoryUtils.user.username;

        const menus = this.props.user.role.menus;
        const username = this.props.user.username;
        if (username === 'admin' || isPublic || menus.indexOf(key) !== -1) {
            return true;
        } else if (item.children) {
            return !!item.children.find(child => menus.indexOf(child.key) !== -1)
        }

    };

    getMenuNodes = (menuList) => {
        const path = this.props.location.pathname;

        return menuList.map(item => {
            if (this.hasAuth(item)){
                if (item.children && item.children.length > 0) {
                    const cItem = item.children.find(cItem => path.indexOf(cItem.key) === 0);
                    if (cItem) this.openKey = item.key;
                    return (
                        <SubMenu key={item.key}
                                 title={
                                     <span>
                                <Icon type={item.icon} />
                                <span>{item.title}</span>
                            </span>
                                 }>
                            {
                                this.getMenuNodes(item.children)
                            }
                        </SubMenu>
                    )
                } else {
                    if (item.key === path || path.indexOf(item.key) === 0) {
                        this.props.setHeadTitle(item.title);
                    }
                    return (
                        <Menu.Item key={item.key}>
                            <Link to={item.key} onClick={()=>this.props.setHeadTitle(item.title)}>
                                <Icon type={item.icon} />
                                <span>{item.title}</span>
                            </Link>
                        </Menu.Item>
                    );
                }
            }
        });
    };

    componentWillMount() {
        this.menuNodes = this.getMenuNodes(menuList);
    }

    render() {
        let selectKey = this.props.location.pathname;
        if (selectKey.indexOf('/product') === 0) {
            selectKey = '/product';
        }
        const openkey = this.openKey;
        return (
            <div className='left-nav'>
                <Link to='/home' className='left-nav-header'>
                    <img src={logo} alt='logo'/>
                    <h1>硅谷后台</h1>
                </Link>

                <Menu mode="inline" theme="dark" selectedKeys={[selectKey]} defaultOpenKeys={[openkey]}>
                    {
                        this.menuNodes
                    }
                </Menu>
            </div>
        );
    }
}



export default connect(
    state => ({user: state.user}),
    {setHeadTitle}
)(withRouter(LeftNav));